import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { HashRouter, Switch, Route, Redirect} from 'react-router-dom';
import Reducer from '../redux/reducers';
import Bundle from './bundle';
import Home from '../components/home/Home'

const Store = createStore(
    Reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);



const LoginContainer = () => (
    <Bundle load={() => import('../components/login/LoginContainer')}>
        {(LoginContainer) => <LoginContainer/>}
    </Bundle>
);

const StoreInfoContainer = () => (
    <Bundle load={() => import('../components/static-status/StoreInfoContainer')}>
        {(StoreInfoContainer) => <StoreInfoContainer/>}
    </Bundle>
);
const StoreSearchContainer = () => (
    <Bundle load={() => import('../components/static-status/StoreSearchContainer')}>
        {(StoreSearchContainer) => <StoreSearchContainer/>}
    </Bundle>
);
const EditCommentContainer = () => (
    <Bundle load={() => import('../components/static-status/EditCommentContainer')}>
        {(EditCommentContainer) => <EditCommentContainer/>}
    </Bundle>
);
const StoreListContainer = () => (
    <Bundle load={() => import('../components/storeManage/StoreListContainer')}>
        {(StoreListContainer) => <StoreListContainer/>}
    </Bundle>
);
const StoreManageContainer = () => (
    <Bundle load={() => import('../components/storeManage/StoreManageContainer')}>
        {(StoreManageContainer) => <StoreManageContainer/>}
    </Bundle>
);
const UserInfoContainer = () => (
    <Bundle load={() => import('../components/user/UserInfoContainer')}>
        {(UserInfoContainer) => <UserInfoContainer/>}
    </Bundle>
);
const Error404Container = () => (
    <Bundle load={() => import('../components/error/Error404Container')}>
        {(Error404Container) => <Error404Container/>}
    </Bundle>
);
const Error500Container = () => (
    <Bundle load={() => import('../components/error/Error500Container')}>
        {(Error500Container) => <Error500Container/>}
    </Bundle>
);
const StoreVerifyContainer = () => (
    <Bundle load={() => import('../components/storeManage/StoreVerifyContainer')}>
        {(StoreVerifyContainer) => <StoreVerifyContainer/>}
    </Bundle>
);
const CreateStoreContainer = () => (
    <Bundle load={() => import('../components/storeManage/CreateStoreContainer')}>
        {(CreateStoreContainer) => <CreateStoreContainer/>}
    </Bundle>
);
const Routes = () => (
    <HashRouter>
        <Home>
        <Provider store = {Store}>
            <Switch>
                <Route path="/login" component={ LoginContainer } />
                <Route path="/home" component={ StoreSearchContainer } />
                <Route path="/detail/:sid" component={ StoreInfoContainer } />
                <Route path="/editComment" component={ EditCommentContainer } />
                <Route path="/myStoreList" component={ StoreListContainer } />
                <Route path="/myStore/:sid" component={ StoreManageContainer } />
                <Route path="/createStore" component={ CreateStoreContainer } />
                <Route path="/user/:userName" component={ UserInfoContainer } />
                <Route path="/verify" component={ StoreVerifyContainer } />

                <Route path="/error404" component={ Error404Container } />
                <Route path="/error500" component={ Error500Container } />

                <Redirect to='/home'/>
            </Switch>
        </Provider>
        </Home>
    </HashRouter>
);

export default Routes;
